<template>
  <!-- 榜单页面的头部-->
  <view class="container">
  <view class="rank">
    <view class="left">
      <view class="left-icon-num">
        <text class="iconfont icon-xiangyousanjiaoxing"></text>
        <text>{{playNum}}亿</text>
      </view>
      <image :src="titleInfo.coverImgUrl"></image>
    </view>
    <view class="right">
      <text class="right-title">{{titleInfo.name}}</text>
      <view class="right-content">
        <view class="right-icon-title">
          <text class="iconfont icon-vynil"></text>
          <text style="font-size: 32rpx;">网易云音乐</text>
        </view>
        <text style="font-size: 24rpx;">{{descriptionNum}}&gt</text>
      </view>
    </view>
  </view>    
  <view class="share">
    <text class="iconfont icon-fenxiang"></text>
    <text>分享给微信朋友</text>
  </view>
  </view>
</template>

<script>
  export default {
    name:"common-rank",
    props:['titleInfo'],
    data() {
      return {
        
      };
    },
    computed:{
      //将播放数量转换成亿、万、千
      playNum(){
         return (this.titleInfo.playCount/100000000).toFixed(1);
      },
      // 介绍语言限制字数
      descriptionNum(){
        let str = this.titleInfo.description;
        if(str.length>46){
          str = str.slice(0,45)+'...';
        }
        return str;
      }
    }
  }
</script>

<style scoped>
  .container{
    width: 100%;
    box-sizing: border-box;
    height: 510rpx;
    padding: 34rpx;
    background-color: #5281b5;
  }
  .rank{
    display: flex;
    width: 100%;
    height: 264rpx;
    margin-bottom: 50rpx;
  }

  .rank .left{
    position: relative;
    width: 264rpx;
    border-radius: 4px;
  }
  .rank .left .left-icon-num{
    position: absolute;
    right: 0;
    width: 130rpx;
    font-size: 15px;
    color: rgba(256,256,256,0.9); 
    z-index: 1005;
  }
  .rank .left image{
    width: 264rpx;
    height: 264rpx;
    border-radius: 8px;
  }
 
  .rank .right{
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 40rpx;
    color: rgba(256,256,256,.8);
  }
  .rank .right .right-title{
    font-size: 32rpx;
    color: #FFFFFF;
  }
  .icon-vynil{
    width: 56rpx;
    margin-right: 18rpx;
  }
    
  .rank .right .right-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  
  /* 分享 */
  .share{
    margin: 0 auto;
    width: 334rpx;
    height: 72rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 72rpx;
    vertical-align: middle;
    border-radius: 36rpx;
    color: #FFFFFF;
    background-color: rgba(256,256,256,.3);
  }
  .share .icon-fenxiang{
    margin-right: 14rpx;
  }
</style>
